<template>
  <div class="header" :style="color">
    <div class="contain text-left">
      <i class="el-icon-fa-chevron-left icon" @click="goBack"></i>
    </div>
    <div class="contain text-center">
      <i class="el-icon-fa-bars icon"></i>
    </div>
    <div class="contain text-right">
      <i class="el-icon-fa-paper-plane icon"></i>
      <slot name="saveBut"></slot>
    </div>
  </div>
</template>
<style lang="scss">
.header {
  height: 45px;
  background: #24ADDE;
  display: flex;
  line-height: 0;
  .contain {
    flex: 1;
  }
  .icon {
    font-size: 30px;
    line-height: 45px;
    width: 60px;
    text-align: center;
    cursor: pointer;
    color: whitesmoke;
  }
}
</style>
<script>
import router from '@/router'
export default {
  data () {
    return {
      color: 'black'
    }
  },
  methods: {
    goBack () {
      router.go(-1)
    }
  }
}
</script>
